<template>
	<div class="content" @longpress="longpressItem($event)" @click="gotoChat(msgData)">
		<!-- 1，左侧头像 -->
		<view class="con-left">
			<view class="con-img">
				<image :src="msgData.head"></image>
			</view>
			<view class="con-msg-num" v-if="msgData.msgNum !== 0">
				<text>{{msgData.msgNum}}</text>
			</view>
		</view>
		<!-- 2，中间信息 -->
		<view class="con-center">
			<!-- 2.1，发送者昵称 -->
			<view class="con-center-nickname">
				<text>{{msgData.nickname}}</text>
			</view>
			<!-- 2.2，接收到的最新一条消息 -->
			<view class="con-center-msg">
				<text>{{msgData.news}}</text>
			</view>
		</view>
		<!-- 3，右侧信息 -->
		<view class="con-right">
			<!-- 3.1，最近一条消息发送时间 -->
			<view class="con-right-time">
				<!-- <text>{{msgData.time}}</text> -->
				<text>{{timeHandle}}</text>
			</view>
			<!-- 3.2，是否消息免打扰 -->
			<view class="con-right-disturb" v-if="msgData.isDisturb">
				<image :src="notDisturbImg"></image>
			</view>
		</view>
	</div>
</template>

<script>
	import homeOpenTool from './home-open-tool.vue'

	//导入时间处理工具
	import {
		timeChangeStr,
		timeChangeStamp,
		timeago
	} from '@/utils/time/time.js'

	export default {
		components: {
			homeOpenTool
		},
		props: {
			//消息对象
			msgData: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				notDisturbImg: require('@/static/img/msg/home/wr.svg'),
				topText: '取消置顶'
			}
		},
		computed: {
			timeHandle() {
				if(this.msgData.time){
					var timeStamp = ''
					if (uni.getSystemInfoSync().platform === 'android') {
						timeStamp = timeChangeStamp(this.msgData.time)
					} else {
						timeStamp = timeChangeStamp(this.msgData.time.replace(/-/g, '/'))
					}
					var result = timeago(timeStamp)
					return result
				}
				
				
				// var timeStamp = timeChangeStamp(this.msgData.time)
				// var result = timeago(timeStamp)
				// return result
			}
		},
		methods: {
			//按住
			longpressItem(e) {
				var cellTop = e.touches[0].clientY
				var data = this.msgData
				data.cellTop = cellTop
				data.isTop = true
				this.$emit('longpressItem', data)
			},
			//点击跳转聊天室
			gotoChat(item) {
				if (item.type == 2) {
					return uni.navigateTo({
						url: '/pages/newMsg/chat-user/chat-user?msgObject=' + JSON.stringify(item)
					})
				}
				if (item.type == 3) {
					return uni.navigateTo({
						url: '/pages/newMsg/chat-group/chat-group?msgObject=' + JSON.stringify(item)
					})
				}
			}
		},
		created() {
			//this.timeHandle()
		}
	}
</script>

<style scoped lang="scss">
	.content:active {
		background-color: #D5D5D5;
	}

	.content {
		display: flex;
		width: 100%;
		height: 150rpx;
		background-color: #EDEDED;

		.con-left {
			width: 20%;
			position: relative;
		
			.con-img {
				width: 100%;
				text-align: center;
				position: absolute;
		
				image {
					margin-top: 20rpx;
					width: 110rpx;
					height: 110rpx;
					border-radius: 10rpx;
				}
			}
		
			.con-msg-num {
				z-index: 9;
				position: absolute;
				right: 15rpx;
				top: 6rpx;
				border-radius: 50%;
				background-color: red;
				color: #fff;
				font-size: 22rpx;
				width: 40rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.con-center {
			width: 55%;
			border-bottom: solid 1rpx #eee;

			text {
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				overflow: hidden;
				word-break: break-all;
				/* break-all(允许在单词内换行。) https://www.w3school.com.cn/cssref/pr_word-break.asp*/
				text-overflow: ellipsis;
				/* 超出部分省略号 */
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
			}

			.con-center-nickname {
				margin-bottom: 15rpx;

				text {
					margin-top: 20rpx;
					font-size: 36rpx;
					color: #333;
				}
			}

			.con-center-msg {
				text {
					font-size: 30rpx;
					color: #c0c0c0;
				}
			}
		}

		.con-right {
			width: 25%;
			border-bottom: solid 1rpx #eee;

			.con-right-time {
				margin-top: 20rpx;
				margin-bottom: 5rpx;
				text-align: center;

				text {
					font-size: 20rpx;
					color: #c0c0c0;
				}

			}

			.con-right-disturb {
				text-align: right;

				image {
					margin-right: 20rpx;
					width: 35rpx;
					height: 35rpx;
				}
			}
		}
	}
</style>
